<template>
  <require from="./cronjob-list.css"></require>
  <require from="../../pagination/pagination"></require>
  <div class="cronhob-list-container" id="cronhobListContainer">
    <h4 class="cronjob-list-header">Cronjobs</h4>
    <div if.bind="showCronjobList && initialLoadingFinished">
      <h6 class="cronjob-list-total-count">Total: ${totalItems}</h6>
      <table class="table table-striped table-bordered">
        <tr>
          <th>Process Model ID</th>
          <th>Start Event ID</th>
          <th>Crontab</th>
          <th>Next Execution</th>
        </tr>
        <tr repeat.for="cronjob of cronjobsToDisplay" class="cronjob-list-item" id="cronjobList-${cronjob.processModelId}">
          <td>
            <a route-href="route: design; params.bind: { view: 'detail', diagramName: cronjob.processModelId, solutionUri: activeSolutionEntry.uri }" class="cronjob-list-item-modelname">${cronjob.processModelId}</a>
          </td>
          <td>
            <a>${cronjob.startEventId}</a>
          </td>
          <td>
            <a>${cronjob.crontab}</a>
          </td>
          <td>
            <a>${getBeautifiedDate(cronjob.nextExecution)}</a>
          </td>
        </tr>
      </table>
      <div class="col-md-12 col-xs-12 pagination">
        <pagination show.bind="totalItems > pageSize" view-model.ref="pagination" current-page.two-way="currentPage" per-page.to-view="pageSize" items.to-view="totalItems" max-pages-to-display.to-view="paginationSize" content-is-async.bind="true" is-loading.two-way="paginationShowsLoading"></pagination>
      </div>
    </div>
    <template if.bind="initialLoadingFinished && !showCronjobList">
      <span if.bind="showError" class="cronjob-list__no-cronjobs-text cronjob-list__no-cronjobs-text--error">There was an error while receiving the cronjobs.</span>
      <span else class="cronjob-list__no-cronjobs-text">No active cronjobs found for this user.</span>
    </template>
    <div if.bind="!initialLoadingFinished" class="container">
      <img src="src/resources/images/gears.svg" class="loading-spinner">
    </div>
  </div>
</template>
